<script setup>
import { onMounted, ref } from 'vue';

const emit = defineEmits(['getCurrentPage'])
const  props = defineProps({
  page: {
    type: Number,
    default: 1
  },
  pageNum: {
    type: Number,
    default: 20
  },
  totals: {
    type: Number,
    default: 0
  }
})
const currentPage = ref(1)

onMounted(() => {
  currentPage.value = props.page
})
// paginate
const onClickHandler = (currentPage) => {
  emit('getCurrentPage', currentPage)
}

</script>

<template>
  <div class="paginate-wrap paginate-style">
    <vue-awesome-paginate
      v-model="currentPage"
      :total-items="totals"
      :items-per-page="pageNum"
      :max-pages-shown="5"
      :hide-prev-next-when-ends="true"
      :show-breakpoint-buttons="false"
      :on-click="onClickHandler"
      prev-button-content="上一页"
      next-button-content="下一页"
      back-button-class="back-btn"
      next-button-class="next-btn"
    />
  </div>
</template>

<style lang="less">
.paginate-style {
  --paginate-primary-color: #ffb319;
  --paginate-text-color: #fff;
  --paginate-bg-color: #fff;
  --paginate-border-color: #d8d8d8;
}

.dark .paginate-style {
  --paginate-primary-color: #202634;
  --paginate-text-color: #d1d5d9;
  --paginate-bg-color: #393f4e;
  --paginate-border-color: #ccc;
}

.paginate-wrap {
  padding-top: 30px;
  text-align: center;
}
// paginate
.pagination-container {
  display: flex;
  column-gap: 10px;
}
.paginate-buttons {
  height: 30px;
  width: 30px;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--paginate-bg-color);
  border: 1px solid var(--paginate-border-color);
  color: var(--color-text-d);
}
.paginate-buttons:hover {
  background-color: var(--paginate-bg-color);
}
.active-page {
  background-color: var(--paginate-primary-color);
  border: 1px solid var(--paginate-border-color);
  color: var(--paginate-text-color);
}
.active-page:hover {
  background-color: var(--paginate-primary-color);
}
.back-btn, .next-btn {
  width: 70px;
  background-color: var(--paginate-bg-color);
  box-shadow: 0 1px 0 rgba(66,66,77,.1);
}
@media (max-width: 680px) {
  .paginate-buttons {
    font-size: 12px;
    height: 20px;
    width: 20px;
    padding: 0;
    border-radius: 5px;
  }
  .back-btn, .next-btn {
    font-size: 12px;
    width: 50px;
  }
}
</style>
